{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import split with context %}

{% extends "firefox/whatsnew/base.html" %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('firefox_whatsnew_138') }}
{% endblock %}

{% if LANG == 'de' %}
  {% set main_title = 'Übernimm die Kontrolle über deinen Browser – mit Tab-Gruppen' %}
  {% set main_tagline = '<p>Sag dem Tab-Chaos Lebewohl! Bleibe fokussiert, nutze deine Zeit effizient und behalte stets den Überblick.</p><p>Zieh einfach einen Tab auf einen anderen, um eine Gruppe zu erstellen.</p>' %}
  {% set main_cta = 'Erfahre jetzt mehr' %}
  {% set main_cta_url = 'https://support.mozilla.org/de/kb/tab-groups' %}
{% elif LANG == 'fr' %}
  {% set main_title = 'Prenez le contrôle de votre navigation avec les groupes d’onglets' %}
  {% set main_tagline = '<p>Fini le trop-plein d’onglets. Organisez-vous et contrôlez votre temps et votre capacité d’attention.</p><p>Glissez un onglet sur un autre pour créer votre premier groupe.</p>' %}
  {% set main_cta = 'Montrez-moi' %}
  {% set main_cta_url = 'https://support.mozilla.org/fr/kb/groupes-onglets' %}
{% else %}
  {% set main_title = 'Take control of your browsing with tab groups' %}
  {% set main_tagline = '<p>No more tab overload. Stay organized and in control of your time and attention.</p><p>Drag one tab onto another to create your first group.</p>' %}
  {% set main_cta = 'Show me how' %}
  {% set main_cta_url = 'https://support.mozilla.org/kb/tab-groups' %}
{% endif %}

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=wnp138' %}

{% block wnp_content %}
  {% call split(
    block_class='wnp-content-main mzp-l-split-center-on-sm-md',
    body_class='wnp-content-wrapper',
    media_include='firefox/whatsnew/includes/fx138/video.html',
    media_class='wnp-video-wrapper mzp-l-split-h-center',
    media_after=True
    ) %}
      <h2 class="wnp-content-title">{{ main_title }}</h2>
      <div class="wnp-content-tagline">{{ main_tagline | safe }}</div>
      <p class="wnp-main-cta"><a href="{{ main_cta_url }}?{{ utm_params }}" rel="external" data-cta-text="Show me how" data-cta-position="primary" class="mzp-c-button mzp-t-product">{{ main_cta }}</a></p>
  {% endcall %}

  <section class="wnp-footer">
    <p class="wnp-sign-off">{{ ftl('whatsnew-signoff') }}</p>
    {% include "firefox/whatsnew/includes/mofo-donate-cta.html" %}
  </section>
{% endblock %}

{% block js %}
  {{ js_bundle('data_videoengagement') }}
{% endblock %}
